<template>
  <view class="weather-box" @click="showFuture">
    <view class="cloud-box">
      <view v-for="item in animation" v-if="item.show" :key="item.id"
            :class="item.class" ></view>
    </view>
    <view class="weather-info">
      <view class="weather-info1">
        <text>{{today[0].place}}</text>
        |
        <text>{{today[0].weather}}</text>
      </view>
      <view class="weather-info2">
        <text style="font-size: 80rpx">{{today[0].temperature}}</text>
        <text>℃</text>
      </view>
      <view class="weather-info3">
        <text>{{today[0].low}}</text>
        |
        <text>{{today[0].high}}</text>
      </view>
    </view>
    <view class="weather-info4">
      <text>{{tips}}</text>
    </view>
    <view class="future" v-show="isFuture">
      <view v-for="item in fiveDay">
        <view>
          <text>{{item.data}}</text>|
          <text>{{item.weather}}</text>
        </view>
        <view>
          <text>{{item.high}}</text>|
          <text>{{item.low}}</text>|
          <text>{{item.wind}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "weather-box",
  data(){
    return {
      isFuture:false,
      animation:[
        {
          id:1,
          class:'sunny',
          show:true
        },
        {
          id:2,
          class:'cloudy',
          show:false
        },
        {
          id:3,
          class:'rainy',
          show:false
        },
        {
          id:4,
          class:'rainbow',
          show:false
        },
        {
          id:5,
          class:'stormy',
          show:false
        },
        {
          id:6,
          class:'snowy',
          show:false
        },
        {
          id:7,
          class:'starry',
          show:false
        },
      ],
      today:[
        {
          place:'武夷山市',
          temperature:'18',
          high:'高温 26℃',
          low:'低温 17℃',
          weather:'晴',
        }
      ],
      tips:'感冒低发期，天气舒适，请注意多吃蔬菜水果，多喝热水。点击即可查看今起五日预报',
      fiveDay:[
        {
          high:'高温26℃',
          low:'低温17℃',
          wind:'北风',
          data:'15日星期天',
          weather:'晴',
        },
        {
          high:'高温26℃',
          low:'低温17℃',
          wind:'北风',
          data:'16日星期天',
          weather:'晴',
        },
        {
          high:'高温26℃',
          low:'低温17℃',
          wind:'北风',
          data:'17日星期天',
          weather:'晴',
        },
        {
          high:'高温26℃',
          low:'低温17℃',
          wind:'北风',
          data:'18日星期天',
          weather:'晴',
        },
        {
          high:'高温26℃',
          low:'低温17℃',
          wind:'北风',
          data:'19日星期天',
          weather:'晴',
        },
      ]
    }
  },
  methods:{
    showFuture(){
      this.isFuture=!this.isFuture;
    },
  }
}
</script>

<style lang="scss" scoped>
.weather-box {
  width: 670rpx;
  //height: 320rpx;
  background-color: #88A3D7;
  border-radius: 15rpx;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0 0 30rpx #DBDBDB;

  .cloud-box {
    width: 300rpx;
    height: 180rpx;
    //background-color: #2ecc71;
    margin: 20rpx 20rpx 0;
    position: relative;


    /* SUNNY */
    .sunny {
      -webkit-animation: sunny 15s linear infinite;
      animation: sunny 15s linear infinite;
      background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
      background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
      height: 280rpx;
      width: 40rpx;
      margin-left: -15rpx;
      position: absolute;
      left: 150rpx;
      top: -50rpx;
    }

    .sunny:before {
      background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
      background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
      content: '';
      height: 280rpx;
      width: 40rpx;
      opacity: 1;
      position: absolute;
      bottom: 0rpx;
      left: 0rpx;
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    .sunny:after {
      background: #FFEE44;
      border-radius: 50%;
      box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 30rpx;
      content: '';
      height: 160rpx;
      width: 160rpx;
      position: absolute;
      left: -60rpx;
      top: 60rpx;
    }

    @-webkit-keyframes sunny {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes sunny {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    /* CLOUDY */
    .cloudy {
      -webkit-animation: cloudy 5s ease-in-out infinite;
      animation: cloudy 5s ease-in-out infinite;
      background: #FFFFFF;
      border-radius: 50%;
      box-shadow: #FFFFFF 130rpx -30rpx 0 -10rpx,
      #FFFFFF 50rpx -50rpx,
      #FFFFFF 60rpx 20rpx,
      #FFFFFF 120rpx 30rpx 0 -20rpx,
      #FFFFFF 170rpx 10rpx 0 -10rpx;
      height: 100rpx;
      width: 100rpx;
      margin-left: -60rpx;
      position: absolute;
      left: 100rpx;
      top: 10rpx;
    }

    .cloudy:after {
      -webkit-animation: cloudy_shadow 5s ease-in-out infinite;
      animation: cloudy_shadow 5s ease-in-out infinite;
      background: #000000;
      border-radius: 50%;
      content: '';
      height: 30rpx;
      width: 240rpx;
      opacity: 0.2;
      position: absolute;
      left: 10rpx;
      bottom: -100rpx;
      -webkit-transform: scale(.7);
      -ms-transform: scale(.7);
      transform: scale(.7);
    }

    @-webkit-keyframes cloudy {
      50% {
        -webkit-transform: translateY(-20rpx);
        transform: translateY(-20rpx);
      }
    }
    @keyframes cloudy {
      50% {
        -webkit-transform: translateY(-20rpx);
        transform: translateY(-20rpx);
      }
    }
    @-webkit-keyframes cloudy_shadow {
      50% {
        -webkit-transform: translateY(20rpx) scale(1);
        transform: translateY(20rpx) scale(1);
        opacity: .05;
      }
    }
    @keyframes cloudy_shadow {
      50% {
        -webkit-transform: translateY(20rpx) scale(1);
        transform: translateY(20rpx) scale(1);
        opacity: .05;
      }
    }

    /* RAINY */
    .rainy {
      -webkit-animation: rainy 5s ease-in-out infinite 1s;
      animation: rainy 5s ease-in-out infinite 1s;
      background: #CCCCCC;
      border-radius: 50%;
      box-shadow: #CCCCCC 130rpx -30rpx 0 -10rpx,
      #CCCCCC 50rpx -50rpx,
      #CCCCCC 60rpx 20rpx,
      #CCCCCC 120rpx 30rpx 0 -20rpx,
      #CCCCCC 170rpx 10rpx 0 -10rpx;
      display: block;
      height: 100rpx;
      width: 100rpx;
      margin-left: -60rpx;
      position: absolute;
      left: 100rpx;
      top: 10rpx;
    }

    .rainy:after {
      -webkit-animation: rainy_shadow 5s ease-in-out infinite 1s;
      animation: rainy_shadow 5s ease-in-out infinite 1s;
      background: #000000;
      border-radius: 50%;
      content: '';
      height: 30rpx;
      width: 240rpx;
      opacity: 0.2;
      position: absolute;
      left: 10rpx;
      bottom: -100rpx;
      -webkit-transform: scale(.7);
      -ms-transform: scale(.7);
      transform: scale(.7);
    }

    .rainy:before {
      //-webkit-animation: rainy_rain .7s infinite linear;
      animation: rainy_rain 1s infinite linear;
      content: '';
      background: #CCCCCC;
      border-radius: 50%;
      display: block;
      height: 12rpx;
      width: 6rpx;
      opacity: 0.3;
      -webkit-transform: scale(.9);
      -ms-transform: scale(.9);
      transform: scale(.9);
    }

    //@-webkit-keyframes rainy {
    //  50% {
    //    -webkit-transform: translateY(-20rpx);
    //    transform: translateY(-20rpx);
    //  }
    //}
    @keyframes rainy {
      50% {
        -webkit-transform: translateY(-40rpx);
        transform: translateY(-40rpx);
      }
    }
    //@-webkit-keyframes rainy_shadow {
    //  50% {
    //    -webkit-transform: translateY(20rpx) scale(1);
    //    transform: translateY(20rpx) scale(1);
    //    opacity: 0.05;
    //  }
    //}
    @keyframes rainy_shadow {
      50% {
        -webkit-transform: translateY(40rpx) scale(1);
        transform: translateY(40rpx) scale(1);
        opacity: 0.05;
      }
    }
    //@-webkit-keyframes rainy_rain {
    //  0% {
    //    box-shadow: rgba(0, 0, 0, 0) 30rpx 30rpx,
    //    rgba(0, 0, 0, 0) 40rpx 40rpx,
    //    #000 50rpx 75rpx,
    //    #000 55rpx 50rpx,
    //    #000 70rpx 100rpx,
    //    #000 80rpx 95rpx,
    //    #000 110rpx 45rpx,
    //    #000 90rpx 35rpx;
    //  }
    //  25% {
    //    box-shadow: #000 30rpx 45rpx,
    //    #000 40rpx 60rpx,
    //    #000 50rpx 90rpx,
    //    #000 55rpx 65rpx,
    //    rgba(0, 0, 0, 0) 70rpx 120rpx,
    //    rgba(0, 0, 0, 0) 80rpx 120rpx,
    //    #000 110rpx 70rpx,
    //    #000 90rpx 60rpx;
    //  }
    //  26% {
    //    box-shadow: #000 30rpx 45rpx,
    //    #000 40rpx 60rpx,
    //    #000 50rpx 90rpx,
    //    #000 55rpx 65rpx,
    //    rgba(0, 0, 0, 0) 70rpx 40rpx,
    //    rgba(0, 0, 0, 0) 80rpx 20rpx,
    //    #000 110rpx 70rpx,
    //    #000 90rpx 60rpx;
    //  }
    //  50% {
    //    box-shadow: #000 30rpx 70rpx,
    //    #000 40rpx 80rpx,
    //    rgba(0, 0, 0, 0) 50rpx 100rpx,
    //    #000 55rpx 80rpx,
    //    #000 70rpx 60rpx,
    //    #000 80rpx 45rpx,
    //    #000 110rpx 95rpx,
    //    #000 90rpx 85rpx;
    //  }
    //  51% {
    //    box-shadow: #000 30rpx 70rpx,
    //    #000 40rpx 80rpx,
    //    rgba(0, 0, 0, 0) 50rpx 45rpx,
    //    #000 55rpx 80rpx,
    //    #000 70rpx 60rpx,
    //    #000 80rpx 45rpx,
    //    #000 110rpx 95rpx,
    //    #000 90rpx 85rpx;
    //  }
    //  75% {
    //    box-shadow: #000 30rpx 95rpx,
    //    #000 40rpx 100rpx,
    //    #000 50rpx 60rpx,
    //    rgba(0, 0, 0, 0) 55rpx 95rpx,
    //    #000 70rpx 80rpx,
    //    #000 80rpx 70rpx,
    //    rgba(0, 0, 0, 0) 110rpx 120rpx,
    //    rgba(0, 0, 0, 0) 90rpx 110rpx;
    //  }
    //  76% {
    //    box-shadow: #000 30rpx 95rpx,
    //    #000 40rpx 100rpx,
    //    #000 50rpx 60rpx,
    //    rgba(0, 0, 0, 0) 55rpx 35rpx,
    //    #000 70rpx 80rpx,
    //    #000 80rpx 70rpx,
    //    rgba(0, 0, 0, 0) 110rpx 25rpx,
    //    rgba(0, 0, 0, 0) 90rpx 15rpx;
    //  }
    //  100% {
    //    box-shadow: rgba(0, 0, 0, 0) 30rpx 120rpx,
    //    rgba(0, 0, 0, 0) 40rpx 120rpx,
    //    #000 50rpx 75rpx,
    //    #000 55rpx 50rpx,
    //    #000 70rpx 100rpx,
    //    #000 80rpx 95rpx,
    //    #000 110rpx 45rpx,
    //    #000 90rpx 35rpx;
    //  }
    //}
    @keyframes rainy_rain {
      0% {
        box-shadow: rgba(0, 0, 0, 0) 60rpx 60rpx,
        rgba(0, 0, 0, 0) 80rpx 80rpx,
        #000 100rpx 150rpx,
        #000 110rpx 100rpx,
        #000 140rpx 200rpx,
        #000 160rpx 190rpx,
        #000 220rpx 90rpx,
        #000 180rpx 70rpx;
      }
      25% {
        box-shadow: #000 60rpx 90rpx,
        #000 80rpx 120rpx,
        #000 100rpx 180rpx,
        #000 110rpx 130rpx,
        rgba(0, 0, 0, 0) 140rpx 240rpx,
        rgba(0, 0, 0, 0) 160rpx 240rpx,
        #000 220rpx 140rpx,
        #000 180rpx 120rpx;
      }
      26% {
        box-shadow: #000 60rpx 90rpx,
        #000 80rpx 120rpx,
        #000 100rpx 180rpx,
        #000 110rpx 130rpx,
        rgba(0, 0, 0, 0) 140rpx 80rpx,
        rgba(0, 0, 0, 0) 160rpx 40rpx,
        #000 220rpx 140rpx,
        #000 180rpx 120rpx;
      }
      50% {
        box-shadow: #000 60rpx 140rpx,
        #000 80rpx 160rpx,
        rgba(0, 0, 0, 0) 100rpx 200rpx,
        #000 110rpx 160rpx,
        #000 140rpx 120rpx,
        #000 160rpx 90rpx,
        #000 220rpx 190rpx,
        #000 180rpx 170rpx;
      }
      51% {
        box-shadow: #000 60rpx 140rpx,
        #000 80rpx 160rpx,
        rgba(0, 0, 0, 0) 100rpx 90rpx,
        #000 110rpx 160rpx,
        #000 140rpx 120rpx,
        #000 160rpx 90rpx,
        #000 220rpx 190rpx,
        #000 180rpx 170rpx;
      }
      75% {
        box-shadow: #000 60rpx 190rpx,
        #000 80rpx 200rpx,
        #000 100rpx 120rpx,
        rgba(0, 0, 0, 0) 110rpx 190rpx,
        #000 140rpx 160rpx,
        #000 160rpx 140rpx,
        rgba(0, 0, 0, 0) 220rpx 240rpx,
        rgba(0, 0, 0, 0) 180rpx 220rpx;
      }
      76% {
        box-shadow: #000 60rpx 190rpx,
        #000 80rpx 200rpx,
        #000 100rpx 120rpx,
        rgba(0, 0, 0, 0) 110rpx 70rpx,
        #000 140rpx 160rpx,
        #000 160rpx 140rpx,
        rgba(0, 0, 0, 0) 220rpx 50rpx,
        rgba(0, 0, 0, 0) 180rpx 30rpx;
      }
      100% {
        box-shadow: rgba(0, 0, 0, 0) 60rpx 240rpx,
        rgba(0, 0, 0, 0) 80rpx 240rpx,
        #000 100rpx 150rpx,
        #000 110rpx 100rpx,
        #000 140rpx 200rpx,
        #000 160rpx 190rpx,
        #000 220rpx 90rpx,
        #000 180rpx 70rpx;
      }
    }

    /* RAINBOW */
    .rainbow {
      -webkit-animation: rainbow 5s ease-in-out infinite;
      animation: rainbow 5s ease-in-out infinite;
      border-radius: 340rpx 0 0 0;
      box-shadow: #FB323C -4rpx -4rpx 0 2rpx,
      #F99716 -8rpx -8rpx 0 6rpx,
      #FEE124 -12rpx -12rpx 0 10rpx,
      #AFDF2E -16rpx -16rpx 0 14rpx,
      #6AD7F8 -20rpx -20rpx 0 18rpx,
      #60B1F5 -24rpx -24rpx 0 22rpx,
      #A3459B -28rpx -28rpx 0 26rpx;
      height: 140rpx;
      width: 140rpx;
      margin-left: -40rpx;
      position: absolute;
      left: 140rpx;
      top: 11rpx;
      -webkit-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      transform: rotate(40deg);
    }

    .rainbow:after {
      -webkit-animation: rainbow_shadow 5s ease-in-out infinite;
      animation: rainbow_shadow 5s ease-in-out infinite;
      background: #000000;
      border-radius: 50%;
      content: '';
      opacity: 0.2;
      height: 30rpx;
      width: 200rpx;
      position: absolute;
      bottom: -23rpx;
      left: 40rpx;
      -webkit-transform: rotate(-40deg);
      -ms-transform: rotate(-40deg);
      transform: rotate(-40deg);
      -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
    }

    @-webkit-keyframes rainbow {
      50% {
        -webkit-transform: rotate(50deg);
        transform: rotate(50deg);
      }
    }
    @keyframes rainbow {
      50% {
        -webkit-transform: rotate(50deg);
        transform: rotate(50deg);
      }
    }
    @-webkit-keyframes rainbow_shadow {
      50% {
        -webkit-transform: rotate(-50deg) translate(10rpx) scale(.7);
        transform: rotate(-50deg) translate(10rpx) scale(.7);
        opacity: 0.05;
      }
    }
    @keyframes rainbow_shadow {
      50% {
        -webkit-transform: rotate(-50deg) translate(10rpx) scale(.7);
        transform: rotate(-50deg) translate(10rpx) scale(.7);
        opacity: 0.05;
      }
    }

    /* STARRY */
    .starry {
      -webkit-animation: starry_star 5s ease-in-out infinite;
      animation: starry_star 5s ease-in-out infinite;
      background: #fff;
      border-radius: 50%;
      box-shadow: #FFFFFF 50rpx 14rpx 0 -2rpx,
      rgba(255,255,255,0.1) -70rpx -40rpx 0 -2rpx,
      rgba(255,255,255,0.1) -102rpx -70rpx 0 -2rpx,
      #FFFFFF -104rpx -124rpx 0 -2rpx,
      #FFFFFF 56rpx -144rpx,
      rgba(255, 255, 255, 0.1) 82rpx -38rpx,
      #FFFFFF 68rpx -100rpx,
      rgba(255, 255, 255, 0.1) 28rpx -142rpx 0 -2rpx,
      #FFFFFF 128rpx -41rpx 0 -2rpx,
      rgba(255, 255, 255, 0.1) 62rpx -165rpx 0 -2rpx,
      #FFFFFF 124rpx -180rpx,
      rgba(255, 255, 255, 0.1) 120rpx -127rpx 0 -2rpx,
      #FFFFFF 64rpx -247rpx,
      rgba(255,255,255,0.1) -46rpx -203rpx 0 -2rpx;
      height: 8rpx;
      width: 8rpx;
      margin-left: -10rpx;
      opacity: 1;
      position: absolute;
      left: 120rpx;
      top: 140rpx;
    }

    .starry:after {
      -webkit-animation: starry 5s ease-in-out infinite;
      animation: starry 5s ease-in-out infinite;
      border-radius: 50%;
      box-shadow: #FFFFFF -25rpx 0;
      content: '';
      height: 150rpx;
      width: 150rpx;
      position: absolute;
      top: -106rpx;
      -webkit-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
      transform: rotate(-5deg);
      -webkit-transform-origin: 0 50%;
      -ms-transform-origin: 0 50%;
      transform-origin: 0 50%;
    }

    @-webkit-keyframes starry {
      50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
      }
    }

    @keyframes starry {
      50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
      }
    }
    @-webkit-keyframes starry_star {
      50% {
        box-shadow: rgba(255, 255, 255, 0.1) 46rpx 14rpx 0 -1rpx,
        #FFFFFF -36rpx -19rpx 0 -1rpx,
        #FFFFFF -51rpx -34rpx 0 -1rpx,
        rgba(255,255,255,0.1) -52rpx -62rpx 0 -1rpx,
        rgba(255, 255, 255, 0.1) 14rpx -37rpx,
        #FFFFFF 41rpx -19rpx,
        rgba(255, 255, 255, 0.1) 34rpx -50rpx,
        #FFFFFF 14rpx -71rpx 0 -1rpx,
        rgba(255, 255, 255, 0.1) 64rpx -21rpx 0 -1rpx,
        #FFFFFF 32rpx -85rpx 0 -1rpx,
        rgba(255, 255, 255, 0.1) 64rpx -90rpx,
        #FFFFFF 60rpx -67rpx 0 -1rpx,
        rgba(255, 255, 255, 0.1) 34rpx -127rpx,
        #FFFFFF -26rpx -103rpx 0 -1rpx;
      }
    }
    @keyframes starry_star {
      50% {
        box-shadow: rgba(255, 255, 255, 0.1) 26rpx 7rpx 0 -1rpx,
        #FFFFFF -36rpx -19rpx 0 -1rpx,
        #FFFFFF -51rpx -34rpx 0 -1rpx,
        rgba(255,255,255,0.1) -52rpx -62rpx 0 -1rpx,
        rgba(255, 255, 255, 0.1) 14rpx -37rpx,
        #FFFFFF 41rpx -19rpx,
        rgba(255, 255, 255, 0.1) 34rpx -50rpx,
        #FFFFFF 14rpx -71rpx 0 -1rpx,
        rgba(255, 255, 255, 0.1) 64rpx -21rpx 0 -1rpx,
        #FFFFFF 32rpx -85rpx 0 -1rpx,
        rgba(255, 255, 255, 0.1) 64rpx -90rpx,
        #FFFFFF 60rpx -67rpx 0 -1rpx,
        rgba(255, 255, 255, 0.1) 34rpx -127rpx,
        #FFFFFF -26rpx -103rpx 0 -1rpx;
      }
    }

    /* STORMY */
    .stormy {
      -webkit-animation: stormy 5s ease-in-out infinite;
      animation: stormy 5s ease-in-out infinite;
      background: #222222;
      border-radius: 50%;
      box-shadow: #222222 130rpx -30rpx 0 -10rpx,
      #222222 50rpx -50rpx,
      #222222 60rpx 20rpx,
      #222222 120rpx 30rpx 0 -20rpx,
      #222222 170rpx 10rpx 0 -10rpx;
      height: 100rpx;
      width: 100rpx;
      margin-left: -60rpx;
      position: absolute;
      left: 110rpx;
      top: 0rpx;
    }

    .stormy:after {
      -webkit-animation: stormy_shadow 5s ease-in-out infinite;
      animation: stormy_shadow 5s ease-in-out infinite;
      background: #000;
      border-radius: 50%;
      content: '';
      height: 30rpx;
      width: 240rpx;
      opacity: 0.2;
      position: absolute;
      left: 10rpx;
      bottom: -100rpx;
      -webkit-transform: scale(.7);
      -ms-transform: scale(.7);
      transform: scale(.7);
    }

    .stormy:before {
      -webkit-animation: stormy_thunder 2s steps(1, end) infinite;
      animation: stormy_thunder 2s steps(1, end) infinite;
      border-left: 0rpx solid transparent;
      border-right:14rpx solid transparent;
      border-top: 86rpx solid yellow;
      box-shadow: yellow -14rpx -64rpx;
      content: '';
      display: block;
      height: 0;
      width: 0;
      position: absolute;
      left: 124rpx;
      top: 120rpx;
      -webkit-transform: rotate(14deg);
      -ms-transform: rotate(14deg);
      transform: rotate(14deg);
      -webkit-transform-origin: 50% -60rpx;
      -ms-transform-origin: 50% -60rpx;
      transform-origin: 50% -60rpx;
    }

    @-webkit-keyframes stormy {
      50% {
        -webkit-transform: translateY(-20rpx);
        transform: translateY(-20rpx);
      }
    }
    @keyframes stormy {
      50% {
        -webkit-transform: translateY(-20rpx);
        transform: translateY(-20rpx);
      }
    }
    @-webkit-keyframes stormy_shadow {
      50% {
        -webkit-transform: translateY(20rpx) scale(1);
        transform: translateY(20rpx) scale(1);
        opacity: 0.05;
      }
    }
    @keyframes stormy_shadow {
      50% {
        -webkit-transform: translateY(20rpx) scale(1);
        transform: translateY(20rpx) scale(1);
        opacity: 0.05;
      }
    }
    @-webkit-keyframes stormy_thunder {
      0% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
        opacity: 1;
      }
      5% {
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        opacity: 1;
      }
      10% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
      }
      15% {
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        opacity: 0;
      }
    }
    @keyframes stormy_thunder {
      0% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
        opacity: 1;
      }
      5% {
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        opacity: 1;
      }
      10% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
      }
      15% {
        -webkit-transform: rotate(-34deg);
        transform: rotate(-34deg);
        opacity: 0;
      }
    }

    /* SNOWY */
    .snowy {
      -webkit-animation: snowy 5s ease-in-out infinite 1s;
      animation: snowy 5s ease-in-out infinite 1s;
      background: #FFFFFF;
      border-radius: 50%;
      box-shadow: #FFFFFF 65rpx -15rpx 0 -5rpx,
      #FFFFFF 25rpx -25rpx,
      #FFFFFF 30rpx 10rpx,
      #FFFFFF 60rpx 15rpx 0 -10rpx,
      #FFFFFF 85rpx 5rpx 0 -5rpx;
      display: block;
      height: 50rpx;
      width: 50rpx;
      margin-left: -60rpx;
      position: absolute;
      left: 112rpx;
      top: 70rpx;
    }

    .snowy:after {
      -webkit-animation: snowy_shadow 5s ease-in-out infinite 1s;
      animation: snowy_shadow 5s ease-in-out infinite 1s;
      background: #000000;
      border-radius: 50%;
      content: '';
      height: 15rpx;
      width: 120rpx;
      opacity: 0.2;
      position: absolute;
      left: 8rpx;
      bottom: -60rpx;
      -webkit-transform: scale(.7);
      -ms-transform: scale(.7);
      transform: scale(.7);
    }

    .snowy:before {
      -webkit-animation: snowy_snow 2s infinite linear;
      animation: snowy_snow 2s infinite linear;
      content: '';
      border-radius: 50%;
      display: block;
      height: 7rpx;
      width: 7rpx;
      opacity: 0.8;
      -webkit-transform: scale(.9);
      -ms-transform: scale(.9);
      transform: scale(.9);
    }

    @-webkit-keyframes snowy {
      50% {
        -webkit-transform: translateY(-20rpx);
        transform: translateY(-20rpx);
      }
    }
    @keyframes snowy {
      50% {
        -webkit-transform: translateY(-20rpx);
        transform: translateY(-20rpx);
      }
    }
    @-webkit-keyframes snowy_shadow {
      50% {
        -webkit-transform: translateY(20rpx) scale(1);
        transform: translateY(20rpx) scale(1);
        opacity: 0.05;
      }
    }
    @keyframes snowy_shadow {
      50% {
        -webkit-transform: translateY(20rpx) scale(1);
        transform: translateY(20rpx) scale(1);
        opacity: 0.05;
      }
    }
    @-webkit-keyframes snowy_snow {
      0% {
        box-shadow: rgba(238, 238, 238, 0) 30rpx 30rpx,
        rgba(238, 238, 238, 0) 40rpx 40rpx,
        #EEEEEE 50rpx 75rpx,
        #EEEEEE 55rpx 50rpx,
        #EEEEEE 70rpx 100rpx,
        #EEEEEE 80rpx 95rpx,
        #EEEEEE 110rpx 45rpx,
        #EEEEEE 90rpx 35rpx;
      }
      25% {
        box-shadow: #EEEEEE 30rpx 45rpx,
        #EEEEEE 40rpx 60rpx,
        #EEEEEE 50rpx 90rpx,
        #EEEEEE 55rpx 65rpx,
        rgba(238, 238, 238, 0) 70rpx 120rpx,
        rgba(238, 238, 238, 0) 80rpx 120rpx,
        #EEEEEE 110rpx 70rpx,
        #EEEEEE 90rpx 60rpx;
      }
      26% {
        box-shadow: #EEEEEE 30rpx 45rpx,
        #EEEEEE 40rpx 60rpx,
        #EEEEEE 50rpx 90rpx,
        #EEEEEE 55rpx 65rpx,
        rgba(238, 238, 238, 0) 70rpx 40rpx,
        rgba(238, 238, 238, 0) 80rpx 20rpx,
        #EEEEEE 110rpx 70rpx,
        #EEEEEE 90rpx 60rpx;
      }
      50% {
        box-shadow: #EEEEEE 30rpx 70rpx,
        #EEEEEE 40rpx 80rpx,
        rgba(238, 238, 238, 0) 50rpx 100rpx,
        #EEEEEE 55rpx 80rpx,
        #EEEEEE 70rpx 60rpx,
        #EEEEEE 80rpx 45rpx,
        #EEEEEE 110rpx 95rpx,
        #EEEEEE 90rpx 85rpx;
      }
      51% {
        box-shadow: #EEEEEE 30rpx 70rpx,
        #EEEEEE 40rpx 80rpx,
        rgba(238, 238, 238, 0) 50rpx 45rpx,
        #EEEEEE 55rpx 80rpx,
        #EEEEEE 70rpx 60rpx,
        #EEEEEE 80rpx 45rpx,
        #EEEEEE 110rpx 95rpx,
        #EEEEEE 90rpx 85rpx;
      }
      75% {
        box-shadow: #EEEEEE 30rpx 95rpx,
        #EEEEEE 40rpx 100rpx,
        #EEEEEE 50rpx 60rpx,
        rgba(238, 238, 238, 0) 55rpx 95rpx,
        #EEEEEE 70rpx 80rpx,
        #EEEEEE 80rpx 70rpx,
        rgba(238, 238, 238, 0) 110rpx 120rpx,
        rgba(238, 238, 238, 0) 90rpx 110rpx;
      }
      76% {
        box-shadow: #EEEEEE 30rpx 95rpx,
        #EEEEEE 40rpx 100rpx,
        #EEEEEE 50rpx 60rpx,
        rgba(238, 238, 238, 0) 55rpx 35rpx,
        #EEEEEE 70rpx 80rpx,
        #EEEEEE 80rpx 70rpx,
        rgba(238, 238, 238, 0) 110rpx 25rpx,
        rgba(238, 238, 238, 0) 90rpx 15rpx;
      }
      100% {
        box-shadow: rgba(238, 238, 238, 0) 30rpx 120rpx,
        rgba(238, 238, 238, 0) 40rpx 120rpx,
        #EEEEEE 50rpx 75rpx,
        #EEEEEE 55rpx 50rpx,
        #EEEEEE 70rpx 100rpx,
        #EEEEEE 80rpx 95rpx,
        #EEEEEE 110rpx 45rpx,
        #EEEEEE 90rpx 35rpx;
      }
    }
    @keyframes snowy_snow {
      0% {
        box-shadow: rgba(238, 238, 238, 0) 30rpx 30rpx,
        rgba(238, 238, 238, 0) 40rpx 40rpx,
        #EEEEEE 50rpx 75rpx,
        #EEEEEE 55rpx 50rpx,
        #EEEEEE 70rpx 100rpx,
        #EEEEEE 80rpx 95rpx,
        #EEEEEE 110rpx 45rpx,
        #EEEEEE 90rpx 35rpx;
      }
      25% {
        box-shadow: #EEEEEE 30rpx 45rpx,
        #EEEEEE 40rpx 60rpx,
        #EEEEEE 50rpx 90rpx,
        #EEEEEE 55rpx 65rpx,
        rgba(238, 238, 238, 0) 70rpx 120rpx,
        rgba(238, 238, 238, 0) 80rpx 120rpx,
        #EEEEEE 110rpx 70rpx,
        #EEEEEE 90rpx 60rpx;
      }
      26% {
        box-shadow: #EEEEEE 30rpx 45rpx,
        #EEEEEE 40rpx 60rpx,
        #EEEEEE 50rpx 90rpx,
        #EEEEEE 55rpx 65rpx,
        rgba(238, 238, 238, 0) 70rpx 40rpx,
        rgba(238, 238, 238, 0) 80rpx 20rpx,
        #EEEEEE 110rpx 70rpx,
        #EEEEEE 90rpx 60rpx;
      }
      50% {
        box-shadow: #EEEEEE 30rpx 70rpx,
        #EEEEEE 40rpx 80rpx,
        rgba(238, 238, 238, 0) 50rpx 100rpx,
        #EEEEEE 55rpx 80rpx,
        #EEEEEE 70rpx 60rpx,
        #EEEEEE 80rpx 45rpx,
        #EEEEEE 110rpx 95rpx,
        #EEEEEE 90rpx 85rpx;
      }
      51% {
        box-shadow: #EEEEEE 30rpx 70rpx,
        #EEEEEE 40rpx 80rpx,
        rgba(238, 238, 238, 0) 50rpx 45rpx,
        #EEEEEE 55rpx 80rpx,
        #EEEEEE 70rpx 60rpx,
        #EEEEEE 80rpx 45rpx,
        #EEEEEE 110rpx 95rpx,
        #EEEEEE 90rpx 85rpx;
      }
      75% {
        box-shadow: #EEEEEE 30rpx 95rpx,
        #EEEEEE 40rpx 100rpx,
        #EEEEEE 50rpx 60rpx,
        rgba(238, 238, 238, 0) 55rpx 95rpx,
        #EEEEEE 70rpx 80rpx,
        #EEEEEE 80rpx 70rpx,
        rgba(238, 238, 238, 0) 110rpx 120rpx,
        rgba(238, 238, 238, 0) 90rpx 110rpx;
      }
      76% {
        box-shadow: #EEEEEE 30rpx 95rpx,
        #EEEEEE 40rpx 100rpx,
        #EEEEEE 50rpx 60rpx,
        rgba(238, 238, 238, 0) 55rpx 35rpx,
        #EEEEEE 70rpx 80rpx,
        #EEEEEE 80rpx 70rpx,
        rgba(238, 238, 238, 0) 110rpx 25rpx,
        rgba(238, 238, 238, 0) 90rpx 15rpx;
      }
      100% {
        box-shadow: rgba(238, 238, 238, 0) 30rpx 120rpx,
        rgba(238, 238, 238, 0) 40rpx 120rpx,
        #EEEEEE 50rpx 75rpx,
        #EEEEEE 55rpx 50rpx,
        #EEEEEE 70rpx 100rpx,
        #EEEEEE 80rpx 95rpx,
        #EEEEEE 110rpx 45rpx,
        #EEEEEE 90rpx 35rpx;
      }
    }

    body {
      font-family: sans-serif;
      background: #f5f5f5;
      margin: 0;
    }

    h1 {
      text-align: center;
      font-weight: 400;
      position: absolute;
      width: 100%;
      font-size: 15rpx;
      top: 50%;
      margin-top: -130rpx;
      opacity: .6;
      letter-spacing: 6rpx;
    }

    #fabrizio {
      border-top: 100rpx solid black;
      border-right: 63rpx solid transparent;
      width: 0;
      -webkit-transform: scale(.33);
      -ms-transform: scale(.33);
      transform: scale(.33);
      -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      transform-origin: 0 0;
      margin: 20rpx;
      opacity: .6
    }

    #fabrizio:before {
      background: black;
      width: 20rpx;
      height: 30rpx;
      content: '';
      display: block;
      -webkit-transform: skewX(-32deg);
      -ms-transform: skewX(-32deg);
      transform: skewX(-32deg);
      position: relative;
      top: -64rpx;
      left: 30rpx;
    }

    #fabrizio:after {
      background: black;
      width: 40rpx;
      height: 36rpx;
      content: '';
      display: block;
      -webkit-transform: skewX(-32deg);
      -ms-transform: skewX(-32deg);
      transform: skewX(-32deg);
      position: relative;
      top: -130rpx;
      left: 50rpx;
    }


    //.cloudy{
    //  width: 50rpx;
    //  height: 50rpx;
    //  position: absolute;
    //  //top: 0rpx;
    //  left: 80rpx;
    //  margin-left: -60rpx;
    //  background: #FFFFFF;
    //  border-radius: 50%;
    //  box-shadow: #FFFFFF 65rpx -10rpx 0 -5rpx,
    //  #FFFFFF 25rpx -25rpx,
    //  #FFFFFF 30rpx 10rpx,
    //  #FFFFFF 60rpx 15rpx  0 -10rpx,
    //  #FFFFFF 85rpx 5rpx 0 -5rpx;
    //  animation: cloudy 5s ease-in-out infinite;
    //}
    //@keyframes cloudy{
    //  50%{
    //    transform: translateY(-20rpx);
    //  }
    //}
    //.cloudy::after{
    //  content: '';
    //  width: 120rpx;
    //  height: 15rpx;
    //  position: absolute;
    //  bottom: -60rpx;
    //  left: 5rpx;
    //  background: #000;
    //  border-radius: 50%;
    //  opacity: 0.2;
    //  animation: cloudy-shadow 5s ease-in-out infinite;
    //  transform: scale(0.7);
    //}
    //
    //@keyframes cloudy-shadow{
    //  50%{
    //    transform: translateY(20rpx) scale(1);
    //    opacity: 0.05;
    //  }
    //}
  }

  .weather-info {
    width: 300rpx;
    height: 170rpx;
    //background-color: #6F6F6F;
    margin-top: 30rpx;
    //display: flex;
    //flex-direction: column;
    color: #FFFFFF;
    font-size: 32rpx;

    .weather-info1 {
      text-align: right;
      //margin-right: auto;
    }

    .weather-info2 {
      text-align: right;
      //align-items: center;
    }

    .weather-info3 {
      text-align: right;
    }
  }

  .weather-info4 {
    color: #FFFFFF;
    margin: 20rpx 50rpx 20rpx 30rpx;
  }
  .future{
    margin: 0 50rpx 10rpx 30rpx;
    color: #FFFFFF;
    font-size: 35rpx;
    .future-item{
      margin-bottom: 20rpx;
    }
  }
}
</style>
